<template>
  <div class="elegoodcom">
    <!-- 左边 height="100vh"-->
    <van-tree-select
      @click-nav="leftgo"
      :items="items"
      height="calc(100vh - 88px - 44px - 60px)"
      :main-active-index.sync="active"
    >
      <!-- 右边 -->
      <template #content>
        <!-- 第1层 -->
        <div v-for="(item, index1) in items" :key="index1" ref="gundong">
          <div class="itemTitle">
            <span style="margin-right: 6px">{{ item.text }}</span>
            <span style="font-size: 3px">{{ item.description }}</span>
            <span style="float: right">...</span>
          </div>
          <!-- 第2层 -->
          <div
            v-for="(foota, index2) in item.foods"
            :key="index2"
            @click.stop="gotopus(foota)"
          >
              <van-card
              :price="foota.specfoods[0].price"
              :title="foota.name"
              :desc="foota.tips"
              :thumb="baseURL + foota.image_path"
            >
              <!-- 插槽 -->
              <template #tags>
                  <van-tag plain type="danger">{{
                  foota.rating_count
                }}</van-tag>
                <!-- 小标签 -->
                <!-- 第3层 -->
                <span
                  v-show="foota.attributes"
                  v-for="(name, num) in foota.attributes"
                  :key="num"
                  class="attributesclass"
                  :style="{
                    color: '#' + foota.attributes,
                    fontSize: '12px',
                  }"
                  >{{ name ? name.icon_name : "" }}</span
                >
              </template>
              <template #footer>
                <van-button
                  v-if="foota.mealsNb"
                  icon="minus"
                  type="info"
                  @click.stop="
                    subtraction(
                      index1,
                      index2,
                      foota.mealsNb,
                      foota.specfoods[0].price
                    )
                  "
                />
                <span class="num" v-if="!foota.mealsNb == 0">
                  {{ foota.mealsNb }}
                </span>
                <van-button
                  icon="plus"
                  type="info"
                  @click.stop="
                    ddition(
                      index1,
                      index2,
                      foota.mealsNb,
                      foota.specfoods[0].price,
                      foota.name
                    )
                  "
                />
              </template>
            </van-card>
          </div>
        </div>
      </template>
    </van-tree-select>
    <!-- 底部 -->
    <div class="footer">
      <span class="Income">
        ¥{{ moneyadd }}
        <div class="Delivery">配送费¥5</div>
      </span>
      <span class="Settlement" @click="closeTo">去结算</span>
      <!-- 购物车 -->
      <div class="car">
        <div class="blue"><van-icon name="shopping-cart" /></div>
        <span class="num">{{ goodsNumber }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { shopDetails } from "@/api/goodsmenu.js";
import axios from "@/utils/request";
export default {
  data() {
    return {
      baseURL: axios.defaults.baseURL + "/img/",
      active: 0, //默认选中
      items: [],
      arr: [], //新格式数据
      moneyadd: 0, //总价
      goodsNumber: 0, //个数
      shoppingCart: [], //购物车
    };
  },
  created() {
    // console.log(118, JSON.parse(this.$route.query.obj));
    let obj = JSON.parse(this.$route.query.obj);
    console.log(120, obj.id);
    let restaurant_id = { restaurant_id: obj.id };
    shopDetails(restaurant_id).then((res) => {
      console.log(121, res);
      this.arr = res.data;
      this.copyTransFun(this.arr);
    });
  },
  methods: {
    // 处理数据
    copyTransFun(arr) {
      arr.forEach((item, index) => {
        if (item.name) {
          item.text = item.name;
          delete item.name;
        }
        if (item.userName) {
          item.text = item.userName;
          delete item.userName;
        }
        if (item.foods) {
          item.foods.forEach((mesnb) => {
            mesnb["mealsNb"] = 0;
          });
        }
        // item["badge"] = 0;
      });
      this.items = this.arr;
    },
    //跳转传参
    gotopus(goodsArrmsg) {
      console.log(146, goodsArrmsg);
      this.$router.push({
        path: "/goosDetails",
        query: {
          goodsArrmsg,
        },
      });
    },
    //结算
    closeTo() {
      this.$router.push({
        path: "/orderfrom",
      });
    },
    // 获取下标
    leftgo(idxnum) {
      console.log(idxnum);

      this.$refs.gundong[idxnum].scrollIntoView(true);
    },
    // 减法
    subtraction(sub1, sub2, mnb, price) {
      console.log(134, sub1, sub2, mnb - 1, price);
      this.items[sub1].badge--;
      if (this.items[sub1]["badge"] <= 0) {
        delete this.items[sub1].badge;
      }
      if (!this.items[sub1].foods[sub2].mealsNb) return;
      this.items[sub1].foods[sub2].mealsNb--;
      this.items.splice();
      this.moneyadd -= price;
      this.goodsNumber--;
      this.shoppingCart.mnb--;
      console.log(155, this.moneyadd);
    },
    //加法
    ddition(add1, add2, mnb, price, articleName) {
      //add1是一层foots
      //add2是foots的哪个
      if (!this.items[add1]["badge"]) {
        this.items[add1]["badge"] = 0;
      }
      console.log(138, add1, add2, mnb + 1, price);
      this.items[add1].badge++;
      // console.log(this.items[add1].foods[add2].mealsNb);
      this.items[add1].foods[add2].mealsNb++;
      this.goodsNumber++;
      this.items.splice();
      this.moneyadd += price;
      console.log(165, this.moneyadd);
      console.log(189, mnb, price, articleName);

      /* this.shoppingCart.push({
        name: articleName,
        price: price,
        mnb: mnb + 1,
      }); */
      console.log(204, this.shoppingCart);
    },
  },
};
</script>
<style lang="less" scoped>
.elegoodcom {
  // height: 100vh;
  .itemTitle {
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    background-color: #f5f5f5;
  }
  .attributesclass {
    position: absolute;
    right: 0;
    top: 0px;
    border: 1px solid #df3434;
    color: #df3434;
    padding: 2px;
    border-radius: 5px;
  }

  // /deep/.van-card__footer {
  //   .van-stepper--round {
  //     button {
  //       color: #fff;
  //       background-color: #259ec7;
  //       border: 1px solid #259ec7;
  //     }
  //   }
  // }
  // /deep/.van-tag--round,
  // .van-tag--dange {
  //   position: absolute;
  //   right: 0;
  //   top: 0px;
  //   width: 10px;
  //   background-color: #fff;
  //   color: #1989fa;
  //   border: 1px solid #1989fa;
  //   // writing-mode: vertical-rl;
  // }
  /deep/.van-button {
    box-sizing: border-box;
    border-radius: 50%;
    width: 20px;
    height: 20px;
  }
  .van-button--normal {
    padding: 0;
  }

  .van-button--normal {
    padding: 0;
  }
  .footer {
    position: fixed;
    bottom: 0px;
    height: 50px;
    width: 100%;
    color: #fff;

    .Income {
      padding: 5px 0px 0px 80px;
      font-size: 20px;
      display: block;
      width: 70%;
      height: 100%;
      background-color: #3d3d3f;
      .Delivery {
        font-size: 12px;
        margin-top: 3px;
      }
    }
    .Settlement {
      padding-top: 15px;
      text-align: center;
      position: absolute;
      right: 0px;
      top: 0px;
      height: 80%;
      width: 30%;
      flex: 1;
      background-color: #4ad96c;
    }
    .car {
      position: absolute;
      width: 50px;
      height: 50px;
      top: -20px;
      left: 20px;
      border-radius: 50%;
      background-color: #3d3d3f;
      color: red;
      .blue {
        position: absolute;
        width: 40px;
        height: 40px;
        top: 5px;
        left: 5px;
        border-radius: 50%;
        background-color: #2e90e4;
        .van-icon-shopping-cart {
          position: absolute;
          color: #fff;
          font-size: 30px;
          top: 5px;
          left: 5px;
        }
      }
      .num {
        color: #fff;
        background-color: red;
        position: absolute;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        font-size: 12px;
        top: 0px;
        left: 40px;
        text-align: center;
        line-height: 15px;
      }
    }
  }
}
</style>